<template>
    <el-dialog title="选择店长"
        class='product-dialog'
        append-to-body
        width='800px'
        @close="closeEvt"
        :visible.sync="show">
        <page-layout>
            <template v-slot:header>
                <el-input v-model="query.name" placeholder="输入名字查询" size='small'/>
                <el-button type='primary' size='small' @click="queryEvt">查询</el-button>
            </template>
            <el-table :data="tableData"
                style="width: 100%"
                height="100%"
                ref="multipleTable"
                size='small'>
                <el-table-column prop="id" label="用户编码" width="300" />
             
                <el-table-column prop="name" label="用户名字" width="300"/>
                <el-table-column label="操作" width="200">
                    <template slot-scope="{ row }">
                        <el-button type='text' size='small' @click="selectEvt(row)">选择</el-button>
                    </template>
                </el-table-column>
                
            </el-table>

            <template v-slot:footer>
                <el-pagination :page-sizes="[20, 50, 100, 150]"
                    :page-size="query.size"
                    :current-page="query.page"
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"/>
            </template>

        </page-layout>

    </el-dialog>
</template>

<script>
import {shopListApi,userListApi} from '@/apis/shopApi'
    export default {
        props: {
            value: {
                type: Boolean,
                required: true
            }
        },

        watch: {
            value(val) {
                this.show = val
            }
        },

        data() {
            return {
                show: false,
                tableData: [],
                total: 0,

                query: {
                    name: '',
                    page:1,
                    size:20
                },
                changeTimer: null,
                selectedRows: [],
              
                loading: true,
                isEdit:false
            }
        },

        mounted() {
            this.getUserList()

        },

        methods: {
            closeEvt() {
                this.$emit('input', false)
            },
            queryEvt() {
                this.query.page = 1
                this.getUserList()
            },
          
            async getUserList(){
                let result =await userListApi(this.query)
                if(result.code===200){
                    this.tableData = result.data.rows
                    this.total = result.data.count

                    console.log(result)
                }
            },        
            sizeChange(size) {
                this.query.size = size
                if (this.changeTimer) clearTimeout(this.changeTimer)
                this.changeTimer = setTimeout(() => {
                    this.getUserList()
                }, 100)
            },
            
            currentChange(page) {
                this.query.page = page
                if (this.changeTimer) clearTimeout(this.changeTimer)
                this.changeTimer = setTimeout(() => {
                    this.getUserList()
                }, 100)
            },
            selectEvt(row){
                this.$emit('managerSelectEvt',row)
                this.show=false
            },
        }
    }
</script>